<template>
    <div :class="hm">
      <div style="position:fixed;background-color: white;">
        <div :class="cl">
          <span class="x" @click="del">x</span>
          <img class='gg' src="https://m.chuangkit.com/ziyuan/images/cktlogo.jpg" alt="">
          <button class="btn">App内打开</button>
        </div>
        <div style="width:100vw; height:1.08rem; line-height:.5rem;text-align:center;">
        <input class="sousuo" type="text" placeholder="400000+免费模板任你搜索" name="" id="">
        </div>
      </div>
    </div>
  </template>
  
  <script>
  // @ is an alias to /src
  export default {
    data(){
      return{
        cl:'header',
        hm:'home'
      }
    },
    methods:{
      del(){
        this.cl='yc'
        this.hm='homes'
      }
    }
  }
  </script>
  <style scoped>
    .home{
      text-align: center;
      height: 2rem;
    }
    .homes{
      text-align: center;
      height: 1.08rem;
    }
    .header{
      width: 100vw;
      height: 1.16rem;
      line-height: .85rem;
      background-color: #0672fb;
      text-align: left;
    }
    .gg{
      width: 3.4rem;
      margin-top:.12rem;
      vertical-align: middle;
    }
    .yc{
      display: none;
    }
    .x{
      color: #fff;
      font-size: .48rem;
      vertical-align: middle;
      display: inline-block;
      margin-top: -.1rem;
      margin-left:.3rem;
      margin-right: .3rem;
    }
    .btn{
      position: absolute;
      right: .5rem;
      top:.34rem;
      vertical-align: middle;
      width: 2.251rem;
      height: .6rem;
      border-radius: .6rem;
      border: none;
      background-color: white;
      margin-top: -.1rem;
      margin-left: .6rem;
      line-height: .512rem;
      font-size: .25rem;
      color: #0773fc;
    }
    .sousuo{
      width: 7.0235rem;
      height: .6802rem;
      margin: 0 .24rem;
      border-radius: .6802rem;
      border: none;
      background-color: #f8f8fb;
      text-align: center;
      font-size: 0.3rem;
    }
  </style>